import React from 'react'
import Alert from '@mui/material/Alert';
import { useDispatch, useSelector } from 'react-redux';
import "./index.less"
// 定义一个变量，存储消失的定时器
let timer:NodeJS.Timeout;
export default function Toast() {

  // 现在需要一个控制 该组件显示隐藏的属性，不确定是从哪个组件传递过来的，所以只能从 store 里面传递过来
  const state = useSelector((state:IRootState)=>state.toastData)
  const dispatch = useDispatch()
  // 稍微等等让这个组件能自动消失
  // 这个定时器为什么写这： 因为函数组件 里面的响应式数据发生变化后，会解决当前函数的执行
  if(state.show){
   clearTimeout(timer)
   timer = setTimeout(() => {
      dispatch({
        type : "HIDE_TOAST"
      })
    }, 2000);
  }
  return (
    <div className='toast' style={{display: state.show ? 'block' : 'none'}}>
        <Alert severity={state.type}>{state.msg}</Alert>
    </div>
  )
}
